<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="flexible.min.js">
    </script>
    <script src="req.js"></script>
    <script src="util.js"></script>
    <title>主页</title>
</head>
<style>
    /* 初始化 */
    
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    a {
        text-decoration: none;
        color: #fff;
    }
    
    ul {
        display: flex;
        flex-direction: column;
        list-style: none;
    }
    
    .clearfix:after,
    .clearfix:before {
        content: "";
        display: block;
        clear: both
    }
    /* body背景，规定字体 */
    
    body {
        background: url('./img/beijing.png') no-repeat;
        background-size: cover;
        color: #0f5000;
        /* position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px; */
    }
    /* 头部区域 */
    
    .indexTop {
        width: 100%;
        height: 10px;
    }
    
    .indexTop>img {
        width: 100%;
    }
    /* 主体 */
    
    .container {
        display: flex;
        width: 100vw;
        /* height: 70%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); */
        overflow: hidden;
        padding: 5px
    }
    
    .container li {
        /* width: 15%;
        float: left;
        position: relative; */
        margin: 5%;
        padding: 10px;
        text-align: center;
        overflow: hidden;
        cursor: pointer;
    }
    
    .imgbox {
        width: 100%;
        height: 100%
    }
    
    .imgbox img {
        width: 46%;
        height: 46%;
    }
    
    .container li .imgbox,
    .container li .text {
        margin-top: 10px;
    }
</style>

<body>
    <!-- 头部 -->
    <div class="indexTop">
        <img src="./img/top01.png" alt="">
    </div>
    <!-- 主体 -->
    <div class="container">
        <ul class="clearfix">
            <a href="#">
                <li>
                    <div class="imgbox" id='0'><img src="./img/tubiao0007.png" alt=""></div>
                    <div class="text">工厂灯光</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='1'><img src="./img/tubiao0001.png" alt=""></div>
                    <div class="text">工厂空调</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='2'><img src="./img/tubiao0005.png" alt=""></div>
                    <div class="text">人才市场</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='3'><img src="./img/tubiao0006.png" alt=""></div>
                    <div class="text">自动补人</div>
                </li>
            </a>
        </ul>
        <ul class="clearfix">
            <a href="#">
                <li>
                    <div class="imgbox" id='4'><img src="./img/tubiao0002.png" alt=""></div>
                    <div class="text">供货列表</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='5'><img src="./img/tubiao0003.png" alt=""></div>
                    <div class="text">购买原材料</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='6'><img src="./img/tubiao0009.png" alt=""></div>
                    <div class="text">问题车辆仓库</div>
                </li>
            </a>
            <a href="#">
                <li>
                    <div class="imgbox" id='7'><img src="./img/tubiao0008.png" alt=""></div>
                    <div class="text">成品车辆仓库</div>
                </li>
            </a>
        </ul>
        <a href="#">
            <li>
                <div class="imgbox" id='8'><img src="./img/tubiao0009.png" alt=""></div>
                <div class="text">创意设计</div>
            </li>
        </a>

    </div>

    <script>
        $('li').click(function() {
            nativeMethod.startActivity($(this).children('.imgbox').attr('id'))
        })
    </script>

</body>

</html>